﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <canvas id="chart2Canvas" width="1000" height="750" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasChart2 = document.getElementById("chart2Canvas"); //绘图区域
        canvasChart2.width = window.innerWidth;
        canvasChart2.height = window.innerHeight;
        let paintChart2 = new FCPaint(); //绘图对象
        paintChart2.canvas = canvasChart2;
        scaleCanvas(paintChart2);
        //判断是否移动端
        paintChart2.isMobile = isMobileMode();
        if (paintChart2.isMobile) {
            paintChart2.scaleFactorX = 2.5;
            paintChart2.scaleFactorY = 2.5;
        }
        //判断主题色
        paintChart2.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintChart2.defaultUIStyle = "light";
        }
        addDefaultEvent(canvasChart2, paintChart2);

        //K线视图
        let chart2 = new FCChart();
        chart2.dock = "fill";
        addView(chart2, paintChart2);
        if (chart2.paint.defaultUIStyle == "dark") {
            chart2.backColor = "rgb(0,0,0)";
            chart2.borderColor = "rgb(100,100,100)";
            chart2.textColor = "rgb(255,255,255)";
        } else if (chart2.paint.defaultUIStyle == "light") {
            chart2.backColor = "rgb(255,255,255)";
            chart2.borderColor = "rgb(150,150,150)";
            chart2.textColor = "rgb(0,0,0)";
        }
        chart2.leftVScaleWidth = 70;
        chart2.rightVScaleWidth = 0;
        chart2.rightSpace = 80;
        chart2.vScaleDistance = 35;
        chart2.hScalePixel = 11;
        chart2.hScaleHeight = 30;
        chart2.candleDivPercent = 1;
        chart2.volDivPercent = 0;
        chart2.indDivPercent = 0;
        chart2.font = "Default,12";
        chart2.data = new Array();
        chart2.cycle = "tick";


        /*
        * 黑色风格
        */
        let toBlack_Chart = function () {
            chart2.paint.defaultUIStyle = "dark";
            chart2.backColor = "rgb(0,0,0)";
            chart2.borderColor = "rgb(100,100,100)";
            chart2.textColor = "rgb(255,255,255)";
            chart2.scaleColor = "rgb(100,100,100)";
            chart2.crossTipColor = "rgb(50,50,50)";
            chart2.crossLineColor = "rgb(100,100,100)";
            chart2.gridColor = "rgba(100,100,100,125)";

        };

        /*
        * 白色风格
        */
        let toWhite_Chart = function () {
            chart2.paint.defaultUIStyle = "light";
            chart2.backColor = "rgb(255,255,255)";
            chart2.borderColor = "rgb(0,0,0)";
            chart2.textColor = "rgb(0,0,0)";
            chart2.scaleColor = "rgb(0,0,0)";
            chart2.crossTipColor = "rgb(220,220,220)";
            chart2.crossLineColor = "rgb(100,100,100)";
            chart2.gridColor = "rgba(0,0,0,125)";
        };

        if (chart2.paint.defaultUIStyle == "dark") {
            toBlack_Chart();
        } else if (chart2.paint.defaultUIStyle == "light") {
            toWhite_Chart();
        }
        /*
        * 绘制线条
        * chart:K线
        * paint:绘图对象
        * clipRect:裁剪区域
        * divIndex:图层
        * datas:数据
        * color:颜色
        * selected:是否选中
        */
        let drawChartLines2 = function (chart, paint, clipRect, divIndex, datas, color, text) {
            paint.beginPath();
            let lastX = 0, lastY = 0;
            let showLast = false;
            for (let i = 0; i < datas.length; i++) {
                let x = getChartX(chart, i + chart.firstVisibleIndex);
                let value = datas[i];
                let y = getChartY(chart, divIndex, value);
                if (i > 0) {
                    paint.addLine(lastX, lastY, x, y)
                }
                if (i + chart.firstVisibleIndex == chart.data.length - 1) {
                    showLast = true;
                }
                lastX = x;
                lastY = y;
            }
            paint.drawPath(color, chart.lineWidthChart * 2, 0);
            paint.closePath();
            if (showLast) {
                let r = 10;
                paint.fillEllipse(color, lastX - r, lastY - r, lastX + r, lastY + r);
                if (chart.paint.defaultUIStyle == "dark") {
                    paint.drawEllipse("rgb(255,255,255)", 1, 0, lastX - r, lastY - r, lastX + r, lastY + r);
                } else if (chart.paint.defaultUIStyle == "light") {
                    paint.drawEllipse("rgb(0,0,0)", 1, 0, lastX - r, lastY - r, lastX + r, lastY + r);
                }
                let font = "Default,14";
                let tSize = paint.textSize(text, font);
                if (chart.paint.defaultUIStyle == "dark") {
                    paint.drawText(text, "rgb(255,255,255)", font, lastX - tSize.cx / 2, lastY + tSize.cy + r - tSize.cy / 2);
                } else if (chart.paint.defaultUIStyle == "light") {
                    paint.drawText(text, "rgb(0,0,0)", font, lastX - tSize.cx / 2, lastY + tSize.cy + r - tSize.cy / 2);
                }
            }
        };

        /*
        * 重写计算最大最小值
        * chart:K线
        */
        chart2.onCalculateChartMaxMin = function (chart) {
            chart.candleMax = 0;
            chart.candleMin = 0;
            chart.volMax = 0;
            chart.volMin = 0;
            chart.indMin = 0;
            chart.indMin = 0;
            if (chart.data && chart.data.length > 0) {
                let lastValidIndex = chart.lastVisibleIndex;
                if (chart.lastValidIndex != -1) {
                    lastValidIndex = chart.lastValidIndex;
                }
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    if (i == chart.firstVisibleIndex) {
                        chart.candleMax = chart.data[i].data1;
                        chart.candleMin = chart.data[i].data1;
                    } else {
                        if (chart.candleMax < chart.data[i].data1) {
                            chart.candleMax = chart.data[i].data1;
                        }
                        if (chart.candleMin > chart.data[i].data1) {
                            chart.candleMin = chart.data[i].data1;
                        }
                        if (chart.candleMax < chart.data[i].data2) {
                            chart.candleMax = chart.data[i].data2;
                        }
                        if (chart.candleMin > chart.data[i].data2) {
                            chart.candleMin = chart.data[i].data2;
                        }
                        if (chart.candleMax < chart.data[i].data3) {
                            chart.candleMax = chart.data[i].data3;
                        }
                        if (chart.candleMin > chart.data[i].data3) {
                            chart.candleMin = chart.data[i].data3;
                        }
                        if (chart.candleMax < chart.data[i].data4) {
                            chart.candleMax = chart.data[i].data4;
                        }
                        if (chart.candleMin > chart.data[i].data4) {
                            chart.candleMin = chart.data[i].data4;
                        }
                        if (chart.candleMax < chart.data[i].data5) {
                            chart.candleMax = chart.data[i].data5;
                        }
                        if (chart.candleMin > chart.data[i].data5) {
                            chart.candleMin = chart.data[i].data5;
                        }
                        if (chart.candleMax < chart.data[i].data6) {
                            chart.candleMax = chart.data[i].data6;
                        }
                        if (chart.candleMin > chart.data[i].data6) {
                            chart.candleMin = chart.data[i].data6;
                        }
                    }
                }
            }
        };

        //定义颜色
        let drawColors = new Array();
        drawColors.push("rgb(59,174,218)");
        drawColors.push("rgb(185,63,150)");
        drawColors.push("rgb(219,68,83)");
        drawColors.push("rgb(246,187,67)");
        drawColors.push("rgb(216,112,173)");
        drawColors.push("rgb(140,192,81)");

        /*
        * 重写绘制线条的函数
        * chart:K线
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintChart2.onPaintChartStock = function (chart, paint, clipRect) {
            if (chart.data && chart.data.length > 0) {
                let datas1 = new Array();
                let lastValidIndex = chart.lastVisibleIndex;
                if (chart.lastValidIndex != -1) {
                    lastValidIndex = chart.lastValidIndex;
                }
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas1.push(chart.data[i].data1);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas1, drawColors[0], "项目1");

                let datas2 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas2.push(chart.data[i].data2);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas2, drawColors[1], "项目2");

                let datas3 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas3.push(chart.data[i].data3);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas3, drawColors[2], "项目3");

                let datas4 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas4.push(chart.data[i].data4);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas4, drawColors[3], "项目4");

                let datas5 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas5.push(chart.data[i].data5);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas5, drawColors[4], "项目5");

                let datas6 = new Array();
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    datas6.push(chart.data[i].data6);
                }
                drawChartLines2(chart, paint, clipRect, 0, datas6, drawColors[5], "项目6");
            }
        };

        /*
        * 重写十字线的函数
        * chart:K线
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintChart2.onPaintChartCrossLine = function (chart, paint, clipRect) {
            if (!chart.data || chart.data.length == 0) {
                return;
            }
            let candleDivHeight = getCandleDivHeight(chart);
            let volDivHeight = getVolDivHeight(chart);
            let indDivHeight = getIndDivHeight(chart);
            let crossLineIndex = chart.crossStopIndex;
            if (crossLineIndex == -1) {
                crossLineIndex = chart.lastVisibleIndex;
            }
            let str = "A" + crossLineIndex;
            if (str == "ANaN") {
                crossLineIndex = chart.lastVisibleIndex;
            }
            let drawTitles = new Array();
            drawTitles.push("项目1 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目2 " + chart.data[crossLineIndex].data2.toFixed(chart.candleDigit));
            drawTitles.push("项目3 " + chart.data[crossLineIndex].data3.toFixed(chart.candleDigit));
            drawTitles.push("项目4 " + chart.data[crossLineIndex].data4.toFixed(chart.candleDigit));
            drawTitles.push("项目5 " + chart.data[crossLineIndex].data5.toFixed(chart.candleDigit));
            drawTitles.push("项目6 " + chart.data[crossLineIndex].data6.toFixed(chart.candleDigit));

            let iLeft = chart.leftVScaleWidth + 5;
            for (let i = 0; i < drawTitles.length; i++) {
                let tSize = paint.textSize(drawTitles[i], chart.font);
                paint.drawText(drawTitles[i], drawColors[i], chart.font, iLeft, 5);
                iLeft += tSize.cx + 5;
            }
        };

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvasChart2.width = document.documentElement.clientWidth;
            canvasChart2.height = document.documentElement.clientHeight;
            scaleCanvas(paintChart2);
            updateViewDefault(paintChart2.views);
            invalidate(paintChart2);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };
        updateViewDefault(paintChart2.views);
        invalidate(paintChart2);

        /*
        * 插入模拟数据
        */
        let insertData = function () {
            let lastData = null;
            if (chart2.data.length > 1) {
                lastData = chart2.data[chart2.data.length - 1];
            }
            let data = new SecurityData();
            data.close = 0;
            data.date = Date.now();
            data.data1 = Math.random() * 100 - 50;
            data.data2 = Math.random() * 100 - 50;
            data.data3 = Math.random() * 100 - 50;
            data.data4 = Math.random() * 100 - 50;
            data.data5 = Math.random() * 100 - 50;
            data.data6 = Math.random() * 100 - 50;
            if (lastData) {
                data.data1 = data.data1 + lastData.data1;
                data.data2 = data.data2 + lastData.data2;
                data.data3 = data.data3 + lastData.data3;
                data.data4 = data.data4 + lastData.data4;
                data.data5 = data.data5 + lastData.data5;
                data.data6 = data.data6 + lastData.data6;
            }
            chart2.data.push(data);
            resetChartVisibleRecord(chart2);
            checkChartLastVisibleIndex(chart2);
            chart2.onCalculateChartMaxMin(chart2);
            invalidateView(chart2);
        };

        setInterval(insertData, 20);
    </script>
    <br />
    <br />
    <br />
</body>
</html>
